<template>
    <div style="margin-bottom: 20px;">
        <h2>基本信息</h2>
    </div>
    <el-form ref="ruleFormRef" style="max-width: 400px" :model="ruleForm" :rules="rules" label-width="auto" class="demo-ruleForm" :size="formSize" status-icon >
        <el-form-item label="最多可预订数" prop="bookNum">
            <el-input v-model="ruleForm.bookNum" />
        </el-form-item>
        <el-form-item label="最多可预订天数" prop="bookDayNum">
            <el-input v-model="ruleForm.bookDayNum" />
        </el-form-item>
        <el-form-item label="预定日期范围" prop="bookDateScope">
            <el-input v-model="ruleForm.bookDateScope" />
        </el-form-item>
        <el-form-item label="预订确认" prop="bookAffirm">
            <el-radio-group v-model="ruleForm.bookAffirm">
                <el-radio :value="false">不需要，系统自动确认</el-radio>
                <el-radio :value="true">需要，商家在后台确认预订</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="预订须知" prop="bookNotice">
            <el-input v-model="ruleForm.bookNotice" type="textarea" />
        </el-form-item>
        <el-form-item label="预订须知确认" prop="bookNoticeAffirm">
            <el-radio-group v-model="ruleForm.bookNoticeAffirm">
                <el-radio :value="false">关闭</el-radio>
                <el-radio :value="true">启用</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="预留信息">
          <el-switch v-model="ruleForm.delivery" />
        </el-form-item>
        <div style="margin: 200px;">
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    保存
                </el-button>
            </el-form-item>
        </div>
    </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { addstay } from '@/api/index'
import { ElMessage, type ComponentSize, type FormInstance, type FormRules } from 'element-plus'

interface RuleForm {
  bookNum: number|null
  bookDayNum: number|null
  bookDateScope: number|null
  bookAffirm: boolean|null
  bookNotice: string
  bookNoticeAffirm: boolean | null,
  delivery: boolean|null
}

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref < FormInstance > ()

const ruleForm = reactive<RuleForm>({
  bookNum: null,
  bookDayNum: null,
  bookDateScope: null,
  bookAffirm: null,
  bookNotice: '',
  bookNoticeAffirm: null,
  delivery: null
})


const rules = reactive<FormRules<RuleForm>>({
  bookNum: [
    { required: true, message: '请输入预定数', trigger: 'blur' },
  ],
  bookDayNum: [
    {
      required: true,
      message: '请输入预定天数',
      trigger: 'change',
    },
  ],
  bookDateScope: [
    {
      required: true,
      message: '请输入预定日期范围',
      trigger: 'change',
    },
  ],
  bookAffirm: [
    {
      type: 'date',
      required: true,
      message: '请选择需要或者不需要！',
      trigger: 'change',
    },
  ],
  bookNotice: [
    { required: true, message: '请输入预订须知！', trigger: 'blur' },
  ],
  bookNoticeAffirm: [
    { required: true, message: '请选择关闭还是启用！', trigger: 'blur' },
  ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      addstay(ruleForm).then(res => {
        if (res.code == 200) {
          ElMessage.success("保存成功！");
        }
        else {
          ElMessage.error("保存失败！");
        }
      })
    }
  })
}

</script>
